import React,{Component} from 'react';
import './login.scss';
import {
  Link
} from 'react-router-dom';
import { userLogin } from 'api/login';
import { message } from 'antd';
let storage = window.localStorage;
export default class Login extends Component{
	constructor(props){
    super(props)
    this.state = {
    	type:'password',
    	icon:'glyphicon-eye',
    	close:'hid',
    	color:'glyphicon-nochecked',
      username: '',
      password: ''
    }
	}
	show = () => { //密码显示隐藏
		this.setState({
			type:this.state.type==='password' ? 'text' : 'password',
			icon:this.state.type==='password' ? 'glyphicon-hidden' : 'glyphicon-eye'
		})
	}
	close = () => {
		this.setState({
			close:''
		})
	}
  _userLogin = (user,pwd) => {
		if (this.state.color === 'glyphicon-checked color') { // 是否记住密码
    	storage.setItem('username',this.state.username);
    	storage.setItem('password',this.state.password);
    } else {
    	storage.clear();
    }
    userLogin({ //用户登录接口
      username: user,
      password: pwd
    }).then(res => {
      if (res.code === 1) {
        if (this.props.location) {
        	message.success('登录成功！', 3, this.props.history.push('/'))
        } else {
        	message.success('登录成功！', 3, this.props.history.goBack())
        }
      } else {
      	message.error(res.message, 3)
      }
    })
  }
  handleChange = (e) => {
    let key = e.target.name
    this.setState({[key]: e.target.value})
  }
	clo = () => {
		this.setState({
			password: ''
		})
	}
	check = () => {
		this.setState({
			color:this.state.color === 'glyphicon-checked color' ? 'glyphicon-nochecked' : 'glyphicon-checked color'
		})
	}
	handleCheckbox(e){
    let isChecked = e.target.checked;
    if(isChecked){
      this.setState({
        isRemember: true
      })
    }else{
      this.setState({
        isRemember: false
      })
    }
  }
  componentDidMount () {
    // let ua=req.headers['user-agent'].toLowerCase();
    let ua=navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      
    }
  	if(storage.length !== 0) {
  		this._userLogin(storage['username'],storage['password'])
  	}
  }
  render(){
		return(
			<div className="loginBox">
				<div className="log_title">账户登录 <Link to="/register">注册</Link></div>
				<div className="login">
					<span className="glyphicon glyphicon-user join" style={{fontSize:'1.3rem'}}></span>
					<input type="text" placeholder="用户名/已验证手机号" name='username' value={this.state.username} onChange={this.handleChange}/><br/>
          <span className="glyphicon glyphicon-key join" style={{fontSize:'1.1rem'}}></span>
          <input type={this.state.type} placeholder="密码" name='password' value={this.state.password} onFocus={this.close} onChange={this.handleChange}/>
          <span className={`glyphicon glyphicon-close clo ${this.state.close}`} onClick={this.clo}></span>
					<span className={`glyphicon join1 ${this.state.icon}`} style={{fontSize:'1.1rem'}} onClick={this.show}></span><br/>
					<div>
						<span className={`glyphicon ${this.state.color}`}  onClick={this.check}></span>自动登录
						<Link to='/resetPwd'><span>忘记密码</span></Link>
					</div>
					<input type="submit" value="登录" onClick={this._userLogin.bind(this,this.state.username,this.state.password)} id="submit"/>
        </div>
        {/*<div className="bq">
          <p>总部：中国 · 杭州拱墅区祥园路45号北部软件园盘石新经济大厦</p>
          <p>copyright©2004-2020 盘石信息技术股份有限公司</p>
          <p>All Rights Reserved 浙B2-20090026-13</p>
				</div>*/}
				<div className="tanchu">
					<div>
						<p>用户名或密码不正确</p>
						<span>确定</span>
					</div>
				</div>
			</div>
		)
	}
}
